<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: #1e293b;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        
        .sort-btn {
            padding: 8px 16px;
            background: #2d3748;
            border: 1px solid #3f4b5e;
            border-radius: 6px;
            color: #94a3b8;
            font-size: 13px;
            cursor: pointer;
            margin: 5px;
        }
        
        .sort-btn.active {
            background: #4a90e2 !important;
            border-color: #4a90e2 !important;
            color: white !important;
        }
    </style>
</head>
<body>
    <h2 style="color: white;">测试排序按钮</h2>
    
    <button class="sort-btn" id="btn1">按钮1 (classList)</button>
    <button class="sort-btn" id="btn2">按钮2 (className)</button>
    <button class="sort-btn" id="btn3">按钮3 (setAttribute)</button>
    
    <div style="margin-top: 20px;">
        <button onclick="test1()" style="padding: 10px;">测试 classList.add</button>
        <button onclick="test2()" style="padding: 10px;">测试 className</button>
        <button onclick="test3()" style="padding: 10px;">测试 setAttribute</button>
        <button onclick="reset()" style="padding: 10px;">重置</button>
    </div>
    
    <pre id="log" style="color: white; margin-top: 20px;"></pre>
    
    <script>
        function log(msg) {
            document.getElementById('log').textContent += msg + '\n';
        }
        
        function test1() {
            const btn = document.getElementById('btn1');
            btn.classList.add('active');
            log('✅ classList.add("active")');
            log('   className: ' + btn.className);
        }
        
        function test2() {
            const btn = document.getElementById('btn2');
            btn.className = 'sort-btn active';
            log('✅ className = "sort-btn active"');
            log('   className: ' + btn.className);
        }
        
        function test3() {
            const btn = document.getElementById('btn3');
            btn.setAttribute('class', 'sort-btn active');
            log('✅ setAttribute("class", "sort-btn active")');
            log('   className: ' + btn.className);
        }
        
        function reset() {
            document.getElementById('btn1').className = 'sort-btn';
            document.getElementById('btn2').className = 'sort-btn';
            document.getElementById('btn3').className = 'sort-btn';
            document.getElementById('log').textContent = '';
            log('🔄 已重置所有按钮');
        }
    </script>
</body>
</html>

